*{ margin:0; padding:0;}
html{ width:100%; height:100%; overflow:hidden;}
body{ width:100%; height:100%; font: 14px/1.5 Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;}
li{ list-style:none;}
img{display:block;}

  

.clear:after{
	content:'';
	display:block;
	height:0;
	clear:both;
}

.nav{width:100%; height:60px; line-height:60px; text-align:center; border-bottom:1px solid #e6e6e6; box-sizing: border-box; background:#f7f7f7; } 
.nav ul li{ font-size:20px; display:inline-block; padding:0 30px; color:#1f1f1f;}

.my_left{ width:100%;  position:absolute; top:60px; bottom:65px; overflow:hidden; }
.my_left_animate{ width:100%;  position:absolute;  }

.my_music{  width:100%; position:absolute;}
.my_name{ width:100%; height:120px; }
.my_name dl{padding-top:20px;line-height:80px;}
.my_name dl dt img{ width:80px; height:80px; border-radius:50%; margin:0 15px;}
.my_name dl dt { float:left; }
.my_name dl dd { float:left; font-size:22px; color:#1f1f1f;}
.my_gedan{ margin:0 19px; }
.my_gedan li{ height:100px;  border-bottom:1px solid #e5e5e5; box-sizing:border-box; font-size:22px; color:#1f1f1f; }

.my_tit{ color:#ababab; font-size:17px; text-indent:19px; margin:3% 0;}

.my_gedan li:last-child{ border-bottom:none; }
.my_gedan li dl{ padding-top:15px; }
.my_gedan li dl dt img{ width:68px; height:68px; border-radius:50%; margin-left:15px; margin-right:25px; }
.my_gedan li dl dt{float:left;}
.my_gedan li dl dd{float:left; font-size:20px; margin-top:5px;}
.my_gedan li dl dd p{color:#adadad; font-size:14px; margin-top:5px;}

.my_wifi_music { position:absolute; left:100%; width:100%; }

.my_lunb{position:relative; margin:15px; overflow:hidden;}
 
.my_lunb img{ width:100%; height:auto;  position:absolute; }
.my_lunb ul{width:100%; position:absolute; bottom:10px; text-align:center;}
.my_lunb ul li{ margin:0 2px; border-radius:50%; width:12px; height:12px; background:#b3b2b0; opacity:.7; display:inline-block; }
.my_lunb ul li.my_lhov{ background:#fff; }

.my_pdg{margin: 0 15px; }
 
.my_pdg img{ width:32%; height:auto; float:left;}
.my_pdg img:nth-child(2){ margin:0 2%;}

.my_tuijian{ margin:0 15px; }
.my_tuijian img{ width:100%; height:80px;border-radius:10px;}
.my_tuijian dl{ padding:3% 0; border-bottom:1px solid #e4e4e4; box-sizing: border-box; }
.my_tuijian dl dt{ float:left; width:20%; }
.my_tuijian dl dd{ float:left; width:78%; margin-left:2%; }
.my_tuijian dl dd h3{ font-size:16px; color:#313131; margin-top:5%; }
.my_tuijian dl dd p{ font-size:14px; color:#969696; }

#main{ width:100%; height:100%; position:relative; margin:0 auto; overflow:hidden;  }
.my_play_list{ width:100%; height:100%; background:#fff; background-size:cover; position:absolute; top:0;  }
.my_play_phb{ width:100%; height:100%; background:#fff; background-size:cover; position:absolute; top:0;  }
 .list_title{position:relative; background:#f7f7f7;  width:100%; height:60px; line-height:60px; text-align:center; border-bottom:1px solid #e6e6e6; box-sizing: border-box; }
 .list_title span{ width:10px; height:19px; background:url(../img/details_left.png) no-repeat; background-size:cover; position:absolute; top:20px; left:15px; }
 .list_title h3{ font-weight:300;font-size:20px; }

 .list_content{ width:100%; position:absolute; top:60px; bottom:65px; overflow:hidden;}
 .list_content ul{ width:100%; position:absolute; top:0; left:0; transform:translate3d(0,0,0);}
 .list_content ul li{ height:60px; margin:0 2%;  border-bottom:1px #e5e5e5 solid; box-sizing:border-box;} 
 .list_content ul li:last-child{border-bottom:none;}
 .list_content ul li.active h3{ color:#29abe2; }

 .list_audio{ width:100%; height:65px; position:absolute; bottom:0;  box-shadow:0 0 50px #e6e6e6;}
 .list_audio1{ width:100%; height:65px; }
 .list_audioImg{ width:50px; height:50px;border-radius:50%; float:left; margin:7px 0 0 15px;}
 .list_audioImg.move{ animation:4s linear infinite audioImgMove; -webkit-animation:4s linear infinite audioImgMove;}
@keyframes audioImgMove{
	0%{ transform:rotate(0deg);}
	100%{ transform:rotate(360deg);}
}
@-webkit-keyframes audioImgMove{
	0%{ -webkit-transform:rotate(0deg);}
	100%{ -webkit-transform:rotate(360deg);}
}
 .list_audioText{ float:left;}
 .list_audioBtn{ position:absolute; top:15px; right:15px; width:32px; height:32px;   display:none;}
 .list_audioBtnPlay{   background:url(../img/list_audioPlay.png) no-repeat; background-size:cover; }
 .list_audioBtnPause{   background:url(../img/list_audioPause.png) no-repeat;  background-size:cover; }

#musicDetails{ width:100%; height:100%; background:url(../img/detailsBg.jpg) no-repeat; background-size:cover; position:absolute; top:0; left:0; z-index:10; background-position:bottom;}
 .details_title{ width:100%; height:40px;  font-size:20px; line-height:40px; text-align:center; color:white; position:absolute; top:0;}
 .details_name span{ font-size:12px;}
 .details_tip{ width:19px; height:10px; background:url(../img/details_arrow.png) no-repeat; background-size:cover; position:absolute; right:15px; top:15px;}

 .details_audio{ width:100%; height:150px; position:absolute; bottom:0;}
 .details_audioAll{ width:200px; margin:20px auto; position:relative;}
 .details_audioPro{ width:100%; height:2px; background:white;}
 .details_audioProUp{ width:0; height:2px; background:#29abe2; position:absolute; left:0; top:0;}
 .details_audioProBar{ width:15px; height:15px; background:#29abe2; border-radius:50%; position:absolute; left:0; top:0; margin:-7px;}
 .details_nowTime{ font-size:12px; color:#b3b3b3; position:absolute; top:-8px; left:-40px;}
 .details_allTime{ font-size:12px; color:#b3b3b3; position:absolute; top:-8px; right:-40px;}
 .details_play{ width:55px; height:55px; background:url(../img/details_play.png) no-repeat; background-size:cover; position:absolute; left:50%; margin-left:-27px; top:30px;}
 .details_prev{ width:37px; height:37px; background:url(../img/details_prev.png) no-repeat; background-size:cover; position:absolute; left:10px; top:37px;}
 .details_next{ width:37px; height:37px; background:url(../img/details_next.png) no-repeat; background-size:cover; position:absolute; right:10px; top:37px;}
 .details_playz{ width:55px; height:55px; background:url(../img/details_pause.png) no-repeat; background-size:cover; position:absolute; left:50%; margin-left:-27px; top:30px;}

 

 .details_lyric{ width:100%; position:absolute; top:70px; bottom:150px; overflow:hidden; transition:.5s; -webkit-transition:.5s;}
 .details_lyric ul{ width:100%; text-align:center; color:white; font-size:14px; position:absolute; top:0; left:0; transition:.2s; -webkit-transition:.2s;}
 .details_lyric li{padding-top:15px;}
 .details_lyric li.active{ color:#00ffff;}

#tishi{ position:absolute; top:50%; left:50%; background:rgba(000,000,000,.7); z-index:9999; width:80px; height:40px; margin-top:-20px; margin-left:-40px; font-size:14px; color:#fff; text-align:center; line-height:40px; opacity:0;  transition:.4s;}
 
.title{ color:#3c3c3c; font-size:15px; padding:10px 0 0 0px;}
.name{ color:#b3b3b3; font-size:13px; padding:2px 0 0 0px;}

#listdl dl {  margin:10px  2%;  height:80px; position:relative; overflow:hidden; }
#listdl dl dt{ float:left; margin-right:2%; }
#listdl dl dt img{ width:80px; height:80px; border-radius:5px; }
#listdl dl dd img{ float:left; }
 

.details_GeName{ color:#fff; text-align:Center; }
.details_GeName h3{ color:#fff; text-align:Center; font-size:20px; display:inline-block; font-weight:300; }
.details_GeName p{ color:#fff; text-align:Center; font-size:14px; display:inline-block;  }
.musiXieZhen{ position:absolute; top:0; left:0; width:100%; height:100%; }
.musiXieZhen img{ position:absolute; top:0; left:0; width:100%; height:100%; transition:1s ;}

.details_kj{ position:absolute; top:40px; text-align:center; width:100%; }
.details_kj li{ display:inline; font-size:12px; padding:2px 4px; color:#fff; border:1px solid #fff; border-radius:5px; }
.details_kj li.details_xz{ border:1px solid #00ffff; color:#00ffff; }